<template>
  <f7-page class="bg-color-white"
           infinite
           :infinite-distance="50"
           :infinite-preloader="showPreloader"
           @infinite="loadMore"

  >
    <f7-navbar :title="pageTitle" back-link=" "></f7-navbar>
    <div class="top-filter-box bg-color-white">
      <h3>{{$t('m.lre1')}}(ZOL){{zong}}</h3>
      <div class="date-box">
        <f7-link @click="showDateSheet(1)">{{$moment(startDate).format('YYYY-MM-DD')}} <i class="iconfont icon-xiasanjiaoxing"></i></f7-link>
        <span>{{$t('m.lre2')}}</span>
        <f7-link @click="showDateSheet(2)">{{$moment(endDate).format('YYYY-MM-DD')}} <i class="iconfont icon-xiasanjiaoxing"></i></f7-link>
      </div>
    </div>

<!--    <no-content-tips></no-content-tips>-->

    <ul class="log-list">
      <li v-for="(item, index) in logs" :key="index">
        <h3>{{pageTitle}} <span>{{item.money}}</span></h3>
        <p>{{$moment(item.add_time * 1000).format('YYYY-MM-DD HH:mm:ss')}}</p>
      </li>
    </ul>
    <f7-sheet backdrop :opened="dateSheet" push @sheet:closed="dateSheet = false">
      <f7-page-content>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="handleConfirm"
          @cancel="dateSheet = false"
        />
      </f7-page-content>
    </f7-sheet>
    <f7-toolbar bottom>
      <h3 class="bottom-filter-num">{{$t('m.lre3')}}(ZOL){{fen_zong}}</h3>
    </f7-toolbar>
  </f7-page>
</template>

<script>
  import {financeLog} from "../api/home";

  export default {
    name: "link-red-envelope",
    data () {
      return {
        minDate: new Date(1992, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
        dateSheet: false,
        startDate: new Date(new Date().toLocaleDateString()),
        endDate: new Date(),
        dateType: null,
        logs: [],
        zong: 0,
        fen_zong: 0,
        logsCount: 0,
        showPreloader: true,
        allowInfinite: true,
        pageItems: {
          page: 1,
          num: 10,
          currency_id: 2,
          finance_type: 2,
          type: this.$f7route.query.type,
          start_time: '',
          end_time: ''
        }
      }
    },
    computed: {
      pageTitle() {
        switch (this.type) {
          case '101': return this.$t('m.rb3');
          case '102': return this.$t('m.rb4');
          case '103': return this.$t('m.rb5');
        }
      },
      type() {
        return this.$f7route.query.type;
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        /*const obj = {
          currency_id: 2,
          finance_type: 2,
          type: this.type,
          start_time: parseInt(new Date(this.startDate)/1000),
          end_time: parseInt(new Date(this.endDate)/1000)
        };*/
        this.pageItems.start_time = parseInt(new Date(this.startDate)/1000)
        this.pageItems.end_time = parseInt(new Date(this.endDate)/1000)
        financeLog(this.pageItems).then(res => {
          this.logs = res.data;
          this.zong = res.zong;
          this.fen_zong = res.fen_zong;
          this.logsCount = Number(res.count);
          this.showPreloader = false;
        })
      },
      showDateSheet (type) {
        this.dateSheet = true;
        if (type === 1) this.currentDate = this.startDate;
        else this.currentDate = this.endDate;
        this.dateType = type;
      },
      handleConfirm (value, a, b) {
        if (this.dateType === 1) this.startDate = value;
        else {
          let curValue = new Date(value).getTime();
          let today = new Date(new Date().toLocaleDateString()).getTime();
          // console.log(curValue);
          // console.log(today);
          // console.log(today === curValue);
          if (today === curValue) {
            this.endDate = new Date()
          } else this.endDate = value
        }
        this.dateSheet = false;
        this.pageItems.page = 1;
        this.init();
      },
      loadMore() {
        if (!this.allowInfinite || this.logs.length >= this.logsCount) {
          this.showPreloader = false
          return;
        }
        this.allowInfinite = false;
        this.pageItems.page++
        financeLog(this.pageItems).then(res => {
          this.logs.push(...res.data);
          this.allowInfinite = true;
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .top-filter-box {
    padding: $padding $padding20;
    h3 {
      color: $mainColor;
      margin-bottom: $padding20;
    }
    > .date-box {
      display: flex;
      align-items: center;
      span {
        margin: 0 $padding;
      }
      .link {
        color: #000;
        .iconfont {
          color: $mainColor;
          margin-top: -10px;
          margin-left: 6px;
        }
      }
    }
  }
  .log-list {
    li {
      padding: $padding20;
      border-bottom: 1px solid $borderColor;
      h3 {
        display: flex;
        justify-content: space-between;
      }
      p {
        color: $colorGrey;
        font-size: 25px;
      }
    }
  }
  .bottom-filter-num {
    font-size: 30px;
    color: $mainColor;
  }
</style>
